<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学员教练信息完善</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">

<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<style type="text/css">
#allmap {
	width: 100%;
	height: 500px;
	font-family: "微软雅黑";
}
</style>
<script type="text/javascript"
	src="//api.map.baidu.com/api?v=2.0&ak=8ZwXktX6Nr52Luto9dXu4gUlwGfkETNn"></script>
<script type="text/javascript">
	$(function() {
		$("#header").load("/zlz/header.html");
	})
</script>
</head>
<body>

	<div id="header"></div>
	<div class="container">
		<div class="bg-light">
			<div style="padding: 20px 200px 0px;" id="all">
				<div class="input-group mb-2">
					<div class="input-group-prepend ">
						<span class="input-group-text ">您的昵称</span>
					</div>
					<input type="text" class="form-control" placeholder="请输入昵称"
						v-model="user.nickname">
				</div>
				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">电话号码</span>
					</div>
					<input type="text" class="form-control" placeholder="请输入电话号码"
						v-model="user.phone">
				</div>
				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">您的性别</span>

					</div>
					<div class="input-group-text">
						<input type="checkbox" value="男" :checked="checkmale"
							@click="changemale()"><a>男</a>

					</div>
					<div class="input-group-text">
						<input type="checkbox" value="女" :checked="checkfamale"
							@click="changefamale()"><a>女</a>
					</div>
				</div>
				<div class="input-group mb-2">
					<div class="input-group-prepend ">
						<span class="input-group-text " style="width: 90px">您的QQ</span>
					</div>
					<input type="text" class="form-control" placeholder="请输入您的QQ"
						v-model="user.qq">
				</div>
				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">您的微信</span>
					</div>
					<input type="text" class="form-control" placeholder="请输入您的微信号"
						v-model="user.wechat">
				</div>


				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">信息设置</span>
					</div>
					<select class="form-control" v-model="user.infoRange">
						<option class="form-control" value="1">公开</option>
						<option class="form-control" value="2">好友可见</option>
						<option class="form-control" value="3">保密</option>
					</select>

				</div>
				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">您的简介</span>
					</div>
					<textarea class="form-control" rows="5" placeholder="请输入您的简介"
						v-model="user.description"></textarea>

				</div>


				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">您的头像</span>
					</div>
					<img :src="user.avatar" style="width: 100px; height: 140px">


					<div class="custom-file">
						<input type="file" class="custom-file-input" id="avatarfile"
							accept=".jpg,.gif,.png,.bmp" @change="avatarchange($event)">
						<label class="custom-file-label" for="customFile">选择图片(支持.jpg,.gif,.png,.bmp)</label>
					</div>
				</div>
				<div class="input-group mb-2" v-if="coachInfo!=''">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">是否接课</span>
					</div>
					<select class="form-control" v-model="coachInfo.acceptCourse">
						<option class="form-control" value="1">开始接课</option>
						<option class="form-control" value="2">让我准备一会儿</option>
					</select>

				</div>
				<div class="input-group mb-2" v-if="coachInfo!=''">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">课时费用</span>
					</div>
					<input type="text" class="form-control" placeholder="请设置您的课时费"
						v-model="coachInfo.priceHour">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 80px">元/小时</span>
					</div>
				</div>
				<div class="input-group mb-2">
					<div class="input-group-prepend">
						<span class="input-group-text" style="width: 90px">您的位置</span>
					</div>
					<input type="text" class="form-control" placeholder="您的位置"
						v-model="user.address">
				</div>
			</div>
			<div class="input-group mb-2" v-if="coachInfo!=''"
				style="padding: 0px 200px 20px;">


				<div id="allmap"></div>


				<div class="input-group mb-2">
					<button type="button" class="btn btn-outline-primary"
						onclick="submit()">提交</button>
					<button type="button" class="btn btn-outline-primary"
						onclick="reset()">重置</button>
				</div>
			</div>

		</div>
		<script type="text/javascript">

	var detailVue=new Vue({
		el:"#all",
		data:{
			user:"",			
			checkmale:false,
			checkfamale:false,
			coachInfo:""
		},
		mounted(){
			axios.get("/coach/getUserNoPwd").then(res =>{
				this.user=res.data.data.user;
				if(this.user.role=="2"){
					this.coachInfo=res.data.data.coachInfo;
				}
				if(this.user.gender=="男"){
					this.checkmale=true;
				}else if(this.user.gender=="女"){
					this.checkfamale=true;
				}
			} )
		
			
		},
		methods:{
			changefamale:function(){
				this.checkfamale=!this.checkfamale;
				if(this.checkfamale==this.checkmale){
					this.checkmale=!this.checkmale;				
				}
				this.user.gender="女";
			},
			changemale:function(){
				this.checkmale=!this.checkmale;
				if(this.checkfamale==this.checkmale){
					this.checkfamale=!this.checkfamale;
				}
				this.user.gender="男";
				
			},
			submit:function(){
				
				if(this.coachInfo==""){
					axios({
						headers: {
					        'Content-Type': 'application/json;charset=UTF-8'
					    },
						url:"/coach/updateUser",
						method:"post",			
						data:JSON.stringify(this.user)
					}).then(res=>{
						if(res.data.code==200){
							layer.msg("更新成功");
						}else{
							layer.msg("服务器维护中");
						}
					})
					
				}else{
					this.user.coachInfo=this.coachInfo;
					alert(JSON.stringify(this.user));
					axios({
						headers: {
					        'Content-Type': 'application/json;charset=UTF-8'
					    },
						url:"/coach/updateUser",
						method:"post",			
						data:JSON.stringify(this.user)
					}).then(res=>{
						if(res.data.code==200){
							layer.msg("更新成功");
						}else{
							layer.msg("服务器维护中");
						}
					})
				}
				
			},
			avatarchange:function(e){
				let fd = new FormData()
			    fd.append('file',e.target.files[0]);
				
				axios({
					url:"/coach/updateAvatar",
					method:"post",				
					data:fd
				}).then(res =>{
					if(res.data.code==200){
						this.user.avatar=res.data.data;
					}else{
						layer.msg("图片有误");
					}
					
				})
			},
			reset:function(){
				axios.get("/coach/getUserNoPwd").then(res =>{
					this.user=res.data.data.user;
					if(this.user.role=="2"){
						this.coachInfo=res.data.data.coachInfo;
					}
					if(this.user.gender=="男"){
						this.checkmale=true;
					}else if(this.user.gender=="女"){
						this.checkfamale=true;
					}
				} )
				
			}
		}
	});
	$(function(){ 
		  // 添加带有定位的导航控件
		  var navigationControl = new BMap.NavigationControl({
		    // 靠左上角位置
		    anchor: BMAP_ANCHOR_TOP_LEFT,
		    // LARGE类型
		    type: BMAP_NAVIGATION_CONTROL_LARGE,
		    // 启用显示定位
		    enableGeolocation: false
		  });
	  var map = new BMap.Map("allmap");
	  
	  setTimeout(function(){
	  if(detailVue.user.latitude==""||detailVue.user.longitude==""){
		  setTimeout(function(){
			  if(detailVue.user.latitude==""||detailVue.user.longitude==""){
				  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
				  var geolocation = new BMap.Geolocation();
					geolocation.getCurrentPosition(function(r){
						if(this.getStatus() == BMAP_STATUS_SUCCESS) {
							var mk = new BMap.Marker(r.point);
							map.addOverlay(mk);
							map.panTo(r.point);
							/* detailVue.user.longitude= r.point.lng;
							detailVue.user.latitude= r.point.lat;  */
							 
						}
						else {
							console.log('failed' + this.getStatus());
						}        
					},{enableHighAccuracy: true})
			  }else{  
				var point = new BMap.Point(detailVue.user.longitude,detailVue.user.latitude);
				map.centerAndZoom(point,15); 
			  	var mk = new BMap.Marker(point);
				map.addOverlay(mk);
				map.panTo(point);
			  }  
			  },1000);
	  }else{
		  var point = new BMap.Point(detailVue.user.longitude,detailVue.user.latitude);
		  map.centerAndZoom(point,15); 
	  var mk = new BMap.Marker(point);
		map.addOverlay(mk);
		map.panTo(point);
	  }
	  },1000);
	  map.addControl(navigationControl);
	  // 添加定位控件
	  var geolocationControl = new BMap.GeolocationControl();	
	  map.addControl(geolocationControl);
	  //添加滚轮缩放
	  map.enableScrollWheelZoom(true);
	  //添加浏览器定位		
		//创建点		
		function add_overlay(e) {

			map.clearOverlays();
			var point = new BMap.Point(e.point.lng, e.point.lat)
			var marker = new BMap.Marker(point);
			map.addOverlay(marker);            //增加点
			
			detailVue.user.longitude= marker.point.lng;
			detailVue.user.latitude= marker.point.lat;
			
			 console.log(detailVue.user.longitude+","+detailVue.user.latitude);
			 
			 var gc = new BMap.Geocoder();
		        gc.getLocation(point, function (rs) {
		            var addComp = rs.addressComponents;
		            console.log(rs.address);//地址信息
		            actual_address = rs.address;
		            var address = new BMap.Label(rs.address, {offset: new BMap.Size(-80, -25)});
		            marker.setLabel(address); //添加地址标注
		            detailVue.user.address= rs.address;
		            console.log(detailVue.user.address);//地址信息
		        });
		}
		
		
		//鼠标监听事件
		map.addEventListener("click",function(e){
			add_overlay(e);

		})
		});
		function submit(){
			detailVue.submit();
		}
		function reset(){
			detailVue.reset();
		}
	</script>
</body>
</html>